<template>
  <div class="content">
    <div class="content-header">
      <div class="content-thumb">
        <div class="content-image" style="width: 100%; height: 100%">
          <img
            :src="item.backgroundImg"
            alt=""
          />
        </div>
      </div>
      <div class="content-content">
          <div class="content-card-title content-multi-ellipsis-l2">
            {{item.shopname}}
          </div>
          <div class="content-desc content-ellipsis">
            <span class="content-desc-grade">{{item.shopgrade}}分&emsp;</span>
            <span class="content-desc-sellnum">月售{{item.monthsell}}&emsp;</span>
            <span class="content-desc-personprice">人均&ensp;￥{{item.personprice}}</span>
          </div>
          <div class="content-takeout content-ellipsis">
            <span class="content-takeout-start">起送 ￥{{item.startfee}}&emsp;</span>
            <span class="content-takeout-finally">配送&ensp;￥{{item.truefee}}</span>
            <span class="content-takeout-time">{{item.selltime}}分钟&ensp;{{item.shoprange}}km</span>
          </div>
          <div class="content-trait content-ellipsis">
            <span class="trait" v-for="(traittype, index) in item.type" :key="index">{{traittype.shopadvantage}}</span>
          </div>
      </div>
    </div>
  </div>
</template>

<script>

import { useRouter } from 'vue-router'
export default {
  props: {
    item: Object
  },
  setup() {
      const router = useRouter()
      const toDetail = (e) => {
        console.log(e);
          router.push(`/Detail/${e}`)
      }
    return {
        toDetail
    };
  },
  components: {
  },
};
</script>

<style lang="less" scoped>
.content {
  border-radius: 10px;
  position: relative;
  box-sizing: border-box;
  padding: 8px 16px;
  margin: 8px auto;
  width: 95%;
  height: 110px;
  color: #323233;
  background: #fdfffd;
  .content-header {
    display: flex;
    .content-thumb {
      position: relative;
      flex: none;
      width: 88px;
      height: 88px;
      margin-right: 8px;
      .content-image {
        overflow: hidden;
        position: relative;
        display: inline-block;
        background-color: #111;
        border-radius: 6px;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
    .content-content {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
      min-height: 88px;
        .content-card-title {
          max-height: 32px;
          font-weight: 800;
          line-height: 30px;
          font-size: 20px;
        }
        .content-desc {
          line-height: 10px;
          .content-desc-grade {
            color: #ff8e28;
            font-weight: 600;
            font-size: 14px;
          }
          .content-desc-personprice,
          .content-desc-sellnum {
            color: #a8aaaa;
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
          }
        }
        .content-takeout {
          line-height: 8px;
          .content-takeout-finally,
          .content-takeout-time,
          .content-takeout-start {
            color: #a8aaaa;
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
          }
          .content-takeout-time {
            float: right;
          }
        }
      
    }
  }
.trait {
  color: #FD9E3F;
  text-align: center;
  padding: 2px 4px;
  width: 50px;
  height: 25px;
  margin-right: 15px;
  background: rgba(245,229,158,0.4);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: SimHei;
}
}
.content-multi-ellipsis-l2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>